<template>
      <a-drawer
      :width="900"
      title="开票详情"
      placement="right"
      :visible="visible"
      @close="visible=false">
        <a-card title="基础信息" style="margin-bottom:24px">
          <template #extra>
            <label style="margin-right:50px;">已选择 
              <a-tag color="#f50">{{table.loadData.length}}</a-tag>  项</label>
            <label>合计开票金额
              <a-tag color="#f50">{{invoiceTatalAmount}}</a-tag>
              元
            </label>
          </template>
          <a-table 
          :columns="table.columns" 
          rowKey="id"
          :pagination="false"
          size="middle"
          :data-source="table.loadData">
          </a-table>
        </a-card>
        <a-form layout="vertical" :form="events_form">
            <a-card title="开票信息" style="margin-bottom:24px">
              <a-row :gutter="20">
                <a-col :span="12">
                    <a-form-item label="园区名称">
                        <a-input :disabled="true" v-decorator="['parkName',{rules: [{ required: true, message: '请输入园区名称' }]}]"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="税率">
                       <a-input :disabled="true" v-decorator="['vatRatio']"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="不含税价（元）">
                       <a-input :disabled="true" v-decorator="['settleTotalAmount']"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="税额">
                       <a-input :disabled="true" v-decorator="['vatTotalAmount']"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="发票类型">
                      <a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" v-decorator="['type',{rules: [{ required: true, message: '请选择发票类型' }],initialValue: ''}]">
                        <a-select-option v-for="invoice in invoiceData" :key="invoice.value">
                            {{ invoice.label }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="类目">
                       <a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" v-decorator="['category',{rules: [{ required: true, message: '请选择类目' }],initialValue: ''}]">
                        <a-select-option v-for="category in categoryData" :key="category.name">
                            {{ category.name }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item label="备注">
                        <a-textarea :rows="4" v-decorator="['remark']"/>
                    </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <a-card title="抬头信息" style="margin-bottom:24px">
              <a-row :gutter="20">
                <a-col :span="12">
                    <a-form-item label="公司名称">
                      <a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" v-decorator="['invoiceTitleId',{rules: [{ required: true, message: '请选择公司名称名' }],initialValue: ''}]" @change="titleChange">
                        <a-select-option v-for="user in titleList" :key="user.id">
                            {{ user.enterpriseName }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="纳税人识别号">
                      <a-input :disabled="true" v-decorator="['creditCode']"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="地址">
                      <a-input :disabled="true" v-decorator="['titleAddress']"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="电话">
                      <a-input :disabled="true" v-decorator="['titleMobile']"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="银行账号">
                      <a-input :disabled="true" v-decorator="['accountNo']"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="开户行">
                      <a-input :disabled="true" v-decorator="['bankName']"/>
                    </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <a-card title="邮寄信息" style="margin-bottom:24px">
              <a-row :gutter="20">
                <a-col :span="12">
                    <a-form-item label="收件人姓名">
                      <a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" v-decorator="['invoiceMailId',{rules: [{ required: true, message: '请选择收件人姓名' }],initialValue: ''}]" @change="mailChange">
                        <a-select-option v-for="user in mailResDtoList" :key="user.id">
                            {{ user.name }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="收件人电话">
                      <a-input :disabled="true" v-decorator="['mailMobile']"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="城市">
                      <a-input :disabled="true" v-decorator="['city']"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="详细地址">
                      <a-input :disabled="true" v-decorator="['mailAddress']"/>
                    </a-form-item>
                </a-col>
              </a-row>
            </a-card>
        </a-form>
        <div class="footer" :style="{ padding: '10px 16px',borderTop: '1px solid #e8e8e8',background: '#fff',position: 'fixed',bottom: 0,right:0,width: '900px',textAlign: 'center'}">
            <a-button :style="{ marginRight: '8px' }" @click="visible=false">取消</a-button>
            <a-button type="primary" :style="{ marginRight: '10px' }" @click="onInerOK">提交</a-button>
        </div>
      </a-drawer>
</template>

<script>
import { mapGetters } from 'vuex'
import { CITY_DATA } from '@/store/mutation-types'
import {
    COLUMNS_BATCH,
} from './form'
import { 
  allGetBillingInfo,
  billingAdd,
  billingDetail
} from '@/api/manage/billing'
import { INVOICE_TYPE_DATA } from '@/config/baseData'
export default {
  name: 'BillingAdd',
  data () {
    return {
      table:{
        columns:COLUMNS_BATCH,
        loadData:[]
      },
      invoiceData:INVOICE_TYPE_DATA,
      invoiceTatalAmount:'',
      categoryData:[],
      mailResDtoList:[],
      titleList:[],
      visible:false
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, { name: 'events_form' });
  },
  methods: {
    async add(batchCodeIds){
      let params = {
        batchCode:batchCodeIds
      }
      const {code,data} = await allGetBillingInfo(params);
      if(code === '1'){
        this.invoiceTatalAmount = data.invoiceTatalAmount;
        this.categoryData = data.category;
        this.table.loadData = data.resDtoList;
        this.mailResDtoList = data.mailResDtoList;
        this.titleList = data.titleList;
        this.$nextTick(() => {
            let values = this.events_form.getFieldsValue();
            for(var key in values){
                values[key] = '';
            }
            values.parkName = data.parkName;
            values.vatTotalAmount = data.vatTotalAmount;
            values.vatRatio = data.vatRatio;
            values.settleTotalAmount = data.settleTotalAmount;
            console.log(values);
            this.events_form.setFieldsValue(values);
        });
        this.visible = true;
      }
     
    },
    async detail(rows){
      let params = {
        id:rows.id,
        invoiceId:rows.invoiceId
      }
      await billingDetail(params);
    },
    titleChange(id){
     const title = this.titleList.find(v=>v.id === id);
     let values = this.events_form.getFieldsValue();
     values.creditCode = title.creditCode;
     values.titleAddress = title.address;
     values.titleMobile = title.mobile;
     values.accountNo = title.accountNo;
     values.bankName = title.bankName;
     values.invoiceTitleId = title.enterpriseName;
     this.events_form.setFieldsValue(values);
    },
    mailChange(id){
      const mail = this.mailResDtoList.find(v=>v.id === id);
      const province = CITY_DATA.find(v => v.value === mail.province);
      const cityObj = province.children.find(v=>v.value === mail.city);
      const areaObj = cityObj.children.find(v=>v.value === mail.area);
      let values = this.events_form.getFieldsValue();
      values.city = `${province.label}${cityObj.label}${areaObj.label}`
      values.mailMobile = mail.mobile;
      values.mailAddress = mail.address;
      values.invoiceMailId = mail.name;
      this.events_form.setFieldsValue(values);
    },
    onInerOK(){
      this.events_form.validateFieldsAndScroll(async(err, values) => {
        if (!err) {
            let params = {};
            params.batchCode = this.table.loadData.map(v=>v.settleBatchCode);
            params.type = values.type;
            params.category = values.category;
            params.remark = values.remark;
            params.invoiceTitleId = values.invoiceTitleId;
            params.invoiceMailId = values.invoiceMailId;
            const {code} = await billingAdd(params);
            if(code === '1'){
              this.$message.success('操作成功');
              this.visible = false;
              this.$emit('ok')
            }
        }
      });
    }
  }
}
</script>
